<template>
    <div style="padding: 10px">

        <div style="background: #fff; border-radius: 8px; padding: 20px;">
            <div style=""><h1>会签合同</h1></div>
            <div class="query-c">
            </div>
            <br>
            <Table max-height="400" border stripe :columns="columns1" :data="data1"></Table>
            <br>
        </div>
    </div>
</template>

<script>
export default {
    name: 'countersign',
    data() {
        return {
            searchcon: '',
            index: 100,
            username: '',
            modalShow: false,
            columns1: [
                {
                    title: '合同编号',
                    width: 150,
                    key: 'number',
                },
                {
                    title: '合同名称',
                    width: 200,
                    key: 'name',
                },
                {
                    title: '开始时间',
                    width: 175,
                    key: 'start',
                },
                {
                    title: '结束时间',
                    width: 175,
                    key: 'end',
                },
                {
                    title: '状态',
                    width: 175,
                    key: 'state',
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => (
                        ('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.index = this.data1[params.index].number
                                        this.submit(this.index)
                                    },
                                },
                            }, '开始会签'),
                        ])
                    ),
                },
            ],
            data1: [
            ],

        }
    },
    created() {
        this.username = localStorage.getItem('userName')
    },
    mounted() {
        fetch('http://localhost:5000/getContractToSign', {
            method: 'post',
            body: JSON.stringify({
                username: this.username,
            }),
            headers: { 'Content-Type': 'application/json' },
        }).then(
            (res) => res.json()
        ).then(
            (res) => {
                let length = res.length
                let conInfo = res.data
                for (let i = 0; i < length; i++) {
                    this.data1.push(conInfo[i])
                }
            }
        )
    },
    methods: {
        // 搜索框返回输入内容
        search() {
            console.log(this.searchcon)
        },
        // 跳转界面
        submit() {
            this.$router.push({ name: 'countersigning',
                params: {
                    connum: this.index,
                } })
        },
    },
}
</script>

<style scoped>
.query-c{
    margin-top: 20px;
}
.suggestion{
    margin-bottom: 20px;
    rows: 10;
    cols: 10;
}
.btn-confirm{
    color:white;
    border-radius: 8px;
    margin-left:16px;
    width:56px;
    height: 36px;
    border:none;
    cursor: pointer;
    background-color:cornflowerblue;
}
.btn-close{
    color:black;
    border-radius: 8px;
    margin-left:16px;
    width:56px;
    height: 36px;
    border:none;
    cursor: pointer;
    background-color:ghostwhite;
}
</style>
